@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1{
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
}

.wrapper {
  margin: 10px auto;
  background: white;
  border: 2px solid gray;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.con {
  width: 100%;
  border-collapse: collapse;
  position: absolute;
  top: -300%;
  left: 0;
}

.content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.item{
  height: 33.3%;
  width: 100%;
  background-color: cornsilk;
  line-height: 198px;
  text-align: center;
  color: coral;
  cursor: pointer;
}

.item:nth-child(2){
  background-color: mistyrose;
}

.item:last-child{
  background-color: powderblue;
}

/* 行 */
.row {
  width: 100%;
}

/* 一个块 */
.cell {
  height: 150px;
  width: 149px;
  float: left;
  border: rgb(54, 74, 129) 1px solid;
  cursor: pointer;
}

.cell1 {
  height: 150px;
  width: 119.2px;
  float: left;
  border: rgb(54, 74, 129) 1px solid;
  cursor: pointer;
}

.cell2 {
  height: 150px;
  width: 74.5px;
  float: left;
  border: rgb(54, 74, 129) 1px solid;
  cursor: pointer;
}

.black{
  background-color: #000;
}

/* 开始暂停按钮 */
.btn{
  text-align: center;
}

button {
  margin: 0px auto;
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background: skyblue;
  line-height: 50px;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
}